<template>
	<div>
		<mj-title type="h2" title="Message 消息提示"></mj-title>
		<div class="page-desc">常用于主动操作后的反馈提示。</div>

		<mj-title type="h5" title="不同状态"></mj-title>
        <div class="page-desc">用来显示「成功、警告、消息、错误」类的操作反馈。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button @click="open1">消息</mj-button>
					<mj-button type="success" @click="open2">成功</mj-button>
					<mj-button type="warning" @click="open3">警告</mj-button>
					<mj-button type="error" @click="open4">失败</mj-button>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
                &lt;div>
	&lt;mj-button @click="open1">消息&lt;/mj-button>
	&lt;mj-button type="success" @click="open2">成功&lt;/mj-button>
	&lt;mj-button type="warning" @click="open3">警告&lt;/mj-button>
	&lt;mj-button type="error" @click="open4">失败&lt;/mj-button>
&lt;/div>
&lt;script>
    export default {
        methods: {
            open1() {
                this.$message.info('这是一条信息')
            },
            open2() {
                this.$message.success('这是一条成功信息')
            },
            open3() {
                this.$message.warning('这是一条警告信息')
            },
            open4() {
                this.$message.error('这是一条错误信息')
            }
        }
    }
&lt;/script>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="带有背景色的提示"></mj-title>
        <div class="page-desc">设置属性 background 后，通知提示会显示背景色。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button @click="background('info')">消息</mj-button>
					<mj-button type="success" @click="background('success')">成功</mj-button>
					<mj-button type="warning" @click="background('warning')">警告</mj-button>
					<mj-button type="error" @click="background('error')">失败</mj-button>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
                &lt;div>
	&lt;mj-button @click="background('info')">消息&lt;/mj-button>
	&lt;mj-button type="success" @click="background('success')">成功&lt;/mj-button>
	&lt;mj-button type="warning" @click="background('warning')">警告&lt;/mj-button>
	&lt;mj-button type="error" @click="background('error')">失败&lt;/mj-button>
&lt;/div>

&lt;script>
    export default {
        methods:{
            background(type) {
                this.$message({
                    msg: '这是一条反馈消息',
                    type: type,
                    background: true
                })
            }, 
        }
    }
&lt;/script>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="可关闭"></mj-title>
        <div class="page-desc">默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用showClose字段。Message 拥有可控的duration，设置0为不会被自动关闭，默认为 3000 毫秒。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div>
					<mj-button @click="open('info')">消息</mj-button>
					<mj-button type="success" @click="open('success')">成功</mj-button>
					<mj-button type="warning" @click="open('warning')">警告</mj-button>
					<mj-button type="error" @click="open('error')">失败</mj-button>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
                &lt;div>
	&lt;mj-button @click="open('info')">消息&lt;/mj-button>
	&lt;mj-button type="success" @click="open('success')">成功&lt;/mj-button>
	&lt;mj-button type="warning" @click="open('warning')">警告&lt;/mj-button>
	&lt;mj-button type="error" @click="open('error')">失败&lt;/mj-button>
&lt;/div>
&lt;script>
    export default {
        methods:{
            open(type) {
                this.$message({
                    msg: '这是一条反馈消息',
                    type: type,
                    duration: 0,
                    showClose: true
                })
            }, 
        }
    }
&lt;/script>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Message 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>msg</td>
					<td>消息文字</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>type</td>
					<td>主题，可选值success/warning/info/error</td>
					<td>String</td>
					<td>info</td>
				</tr>
				<tr>
					<td>duration</td>
					<td>显示时间, 毫秒。设为 0 则不会自动关闭</td>
					<td>number</td>
					<td>3000</td>
				</tr>
				<tr>
					<td>showClose</td>
					<td>是否显示关闭按钮</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>onClose</td>
					<td>关闭时的回调函数, 参数为被关闭的 message 实例</td>
					<td>function</td>
					<td>-</td>
				</tr>
				<tr>
					<td>offset</td>
					<td>Message 距离窗口顶部的偏移量</td>
					<td>number</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Message 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>回调参数</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>close</td>
					<td>关闭当前的 Message</td>
					<td>-</td>
				</tr>
                <tr>
                    <td>closeAll</td>
                    <td>关闭所有 Message</td>
                    <td>-</td>
                </tr>
			</tbody>
		</table>
	</div>
</template>
<script>
export default {
	data(){
		return {

		}
	},
	methods:{
		open(type) {
            this.$message({
                msg: '这是一条反馈消息',
                type: type,
                duration: 0,
                showClose: true
            })
        },
        background(type) {
            this.$message({
                msg: '这是一条反馈消息',
                type: type,
                background: true
            })
        },
        open1() {
            this.$message.info('这是一条信息')
        },
        open2() {
            this.$message.success('这是一条成功信息')
        },
        open3() {
            this.$message.warning('这是一条警告信息')
        },
        open4() {
            this.$message.error('这是一条错误信息')
        }
	}
}
</script>

<style scoped>
#app .tab-content {margin-bottom: 50px;}
</style>